<template>
  <transition name="el-zoom-in-center">
    <div class="JADP-preview-main">
      <div class="JADP-common-page-header">
        <el-page-header
          @back="goBack"
          :content="!dataForm.id ? '新建' : isDetail ? '详情' : '编辑'"
        />
        <div class="options">
          <el-button type="primary" @click="dataFormSubmit()" v-if="!isDetail"
            >确 定</el-button
          >
          <el-button @click="goBack">取 消</el-button>
        </div>
      </div>
      <el-row
        :gutter="15"
        class=" main"
        :style="{ margin: '0 auto', width: '100%' }"
      >
        <el-form
          ref="elForm"
          :model="dataForm"
          :rules="rules"
          size="small"
          label-width="100px"
          label-position="right"
          :disabled="!!isDetail"
        >
          <el-col :span="12">
            <el-form-item label="班级名称" prop="classname">
              <el-input
                v-model="dataForm.classname"
                placeholder="请输入"
                readonly
                @click.native.stop="classInquiry"
              >
                <!-- @click.native.stop="$refs.clazzTable.visible = true" -->

                <el-button
                  slot="append"
                  icon="el-icon-search"
                  @click.native.stop="classInquiry"
                  >查询</el-button
                >
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="用户名" prop="account">
              <el-input
                v-model="dataForm.account"
                placeholder="请输入用户名"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="证件类型" prop="certificatestype">
              <el-select
                v-model="dataForm.certificatestype"
                placeholder="请选择证件类型"
                clearable
                :style="{ width: '100%' }"
                :multiple="false"
              >
                <el-option
                  v-for="(item, index) in certificatestypeOptions"
                  :key="index"
                  :label="item.fullName"
                  :value="item.id"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="证件号" prop="certificatesnumber">
              <el-input
                v-model="dataForm.certificatesnumber"
                placeholder="请输入证件号"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="姓名" prop="realname">
              <el-input
                v-model="dataForm.realname"
                placeholder="请输入姓名"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="性别" prop="gender">
              <el-select
                v-model="dataForm.gender"
                placeholder="请选择性别"
                clearable
                :style="{ width: '100%' }"
                :multiple="false"
              >
                <el-option
                  v-for="(item, index) in genderOptions"
                  :key="index"
                  :label="item.fullName"
                  :value="item.id"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="手机号码" prop="mobilephone">
              <el-input
                v-model="dataForm.mobilephone"
                placeholder="请输入正确的手机号码"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="单位名称" prop="company">
              <el-input
                v-model="dataForm.company"
                placeholder="请输入单位名称"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="单位类型" prop="companytype">
              <el-select
                v-model="dataForm.companytype"
                placeholder="请选择单位类型"
                clearable
                :style="{ width: '100%' }"
                :multiple="false"
              >
                <el-option
                  v-for="(item, index) in companytypeOptions"
                  :key="index"
                  :label="item.fullName"
                  :value="item.id"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="人员类型" prop="persontype">
              <el-select
                v-model="dataForm.persontype"
                placeholder="请选择人员类型"
                clearable
                :style="{ width: '100%' }"
                :multiple="false"
              >
                <el-option
                  v-for="(item, index) in persontypeOptions"
                  :key="index"
                  :label="item.fullName"
                  :value="item.id"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="科室/部门" prop="department">
              <el-input
                v-model="dataForm.department"
                placeholder="请输入科室/部门"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="学历" prop="education">
              <el-select
                v-model="dataForm.education"
                placeholder="请选择学历"
                clearable
                :style="{ width: '100%' }"
                :multiple="false"
              >
                <el-option
                  v-for="(item, index) in educationOptions"
                  :key="index"
                  :label="item.fullName"
                  :value="item.id"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="职称" prop="title">
              <el-input
                v-model="dataForm.title"
                placeholder="请输入职称"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="登记表附件" prop="registration">
              <JADP-UploadFz
                v-model="registrationList"
                :fileSize="2"
                sizeUnit="MB"
                :limit="9"
                buttonText="点击上传"
              >
              </JADP-UploadFz>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="学历证明附件" prop="academic">
              <JADP-UploadFz
                v-model="academicList"
                :fileSize="2"
                sizeUnit="MB"
                :limit="9"
                buttonText="点击上传"
              >
              </JADP-UploadFz>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="身份证附件" prop="idcard">
              <JADP-UploadFz
                v-model="idcardList"
                :fileSize="2"
                sizeUnit="MB"
                :limit="9"
                buttonText="点击上传"
              >
              </JADP-UploadFz>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="2 寸照片" prop="photo">
              <JADP-UploadImg
                v-model="photoList"
                :fileSize="2"
                sizeUnit="MB"
                :limit="9"
              >
              </JADP-UploadImg>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <ExportBox
        v-if="xy_xx_students_scoreexportBoxVisible"
        ref="xy_xx_students_scoreExportBox"
        @download="xy_xx_students_scoredownload"
      />
      <ImportBoxz
        v-if="xy_xx_students_scoreimportBoxVisible"
        ref="xy_xx_students_scoreimportBox"
        @refresh="reset()"
        @ImportPreviewApi="xy_xx_students_scoreImportPreviewApi"
        @saveData="xy_xx_students_scoresaveData"
        @TemplateDownload="xy_xx_students_scoreTemplateDownload"
        :URL="xy_xx_students_scoreURL"
      />
      <ClazzTable ref="clazzTable" @currentRow="currentRow" />
    </div>
  </transition>
</template>
<script>
import request from "@/utils/request";
import { getDictionaryDataSelector } from "@/api/systemData/dictionary";
import { previewDataInterface } from "@/api/systemData/dataInterface";
import ExportBox from "./ExportBox";
import ClazzTable from "./ClazzTable.vue";
export default {
  components: { ExportBox, ClazzTable },
  props: [],
  data() {
    return {
      //导入属性
      xy_xx_students_scoreimportBoxVisible: false,
      xy_xx_students_scoreURL: "xy_xx_students_archives/Xy_xx_students_score",
      xy_xx_students_scoreColumnList: [
        { prop: "papername", label: "试卷名称" },
        { prop: "archivesid", label: "档案id" },
        { prop: "stuid", label: "学生id" },
        { prop: "stuname", label: "学生姓名" },
        { prop: "stuscore", label: "考试得分" },
        { prop: "paperid", label: "试卷ID" },
        { prop: "starttime", label: "考试开始时间" },
        { prop: "endtime", label: "考试结束时间" },
        { prop: "clazzid", label: "班级ID" },
        { prop: "clazzname", label: "班级名称" },
        { prop: "creatoruserid", label: "创建用户" },
        { prop: "creatortime", label: "创建时间" }
      ],
      //导出属性
      xy_xx_students_scoreexportBoxVisible: false,
      xy_xx_students_scoreEntityList: [],
      loading: false,
      visible: false,
      isDetail: false,
      activeName: "",
      dataForm: {
        classname: undefined,
        clazzid: undefined,
        account: undefined,
        certificatestype: "",
        certificatesnumber: undefined,
        realname: undefined,
        gender: "",
        mobilephone: undefined,
        company: undefined,
        companytype: "",
        persontype: "",
        department: undefined,
        education: "",
        title: undefined,
        registration: [],
        academic: [],
        idcard: [],
        photo: [],
        xy_xx_students_scoreEntityList: [],
        organizeId:""
      },
      rules: {
        account: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur"
          }
        ],
        certificatestype: [
          {
            required: true,
            message: "请至少选择一个",
            trigger: "change"
          }
        ],
        certificatesnumber: [
          {
            required: true,
            message: "请输入证件号",
            trigger: "blur"
          }
        ],
        realname: [
          {
            required: true,
            message: "请输入姓名",
            trigger: "blur"
          }
        ],
        gender: [
          {
            required: true,
            message: "请选择性别",
            trigger: "change"
          }
        ],
        mobilephone: [
          {
            required: true,
            message: "请输入正确的手机号码",
            trigger: "blur"
          },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ],
        company: [
          {
            required: true,
            message: "请输入单位名称",
            trigger: "blur"
          }
        ],
        companytype: [
          {
            required: true,
            message: "请至少选择一个",
            trigger: "change"
          }
        ],
        education: [
          {
            required: true,
            message: "请至少选择一个",
            trigger: "change"
          }
        ]
      },
      certificatestypeOptions: [],
      genderOptions: [],
      companytypeOptions: [],
      persontypeOptions: [],
      educationOptions: [],
      registrationList: [],
      registration: [],
      academicList: [],
      academic: [],
      idcardList: [],
      idcard: [],
      photoList: [],
      photo: []
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getcertificatestypeOptions();
    this.getgenderOptions();
    this.getcompanytypeOptions();
    this.getpersontypeOptions();
    this.geteducationOptions();
  },
  mounted() {},
  methods: {
    // 班级查询
    classInquiry() {
      if (this.isDetail) return;
      this.$refs.clazzTable.visible = true;
    },
    //导出按钮点击事件
    xy_xx_students_scoreexportData() {
      this.xy_xx_students_scoreexportBoxVisible = true;
      this.$nextTick(() => {
        this.$refs.xy_xx_students_scoreExportBox.init(
          this.xy_xx_students_scoreColumnList
        );
      });
    },
    //导出弹出层回调函数
    xy_xx_students_scoredownload(data) {
      let query = { ...data, ...this.listQuery, ...this.query ,organizeId :this.$store.getters.organizeId};
      request({
        url: `/api/xy_xx_students_archives/Xy_xx_students_score/Actions/Export`,
        method: "post",
        data: query
      }).then(res => {
        if (!res.data.url) return;
        window.location.href = this.define.comUrl + res.data.url;
        this.$refs.xy_xx_students_scoreExportBox.visible = false;
        this.xy_xx_students_scoreexportBoxVisible = false;
      });
    },
    //导入预览事件
    xy_xx_students_scoreImportPreviewApi(val) {
      let query = { fileName: val ,organizeId :this.$store.getters.organizeId};
      request({
        url: `/api/xy_xx_students_archives/Xy_xx_students_score/ImportPreview`,
        method: "get",
        data: query
      })
        .then(res => {
          this.xy_xx_students_scoreEntityList = res.data.dataRow;
          this.$refs.xy_xx_students_scoreimportBox.list = res.data.dataRow;
          this.$refs.xy_xx_students_scoreimportBox.btnLoading = false;
          this.$refs.xy_xx_students_scoreimportBox.active++;
        })
        .catch(() => {
          this.$refs.xy_xx_students_scoreimportBox.btnLoading = false;
        });
    },
    //下载导入模板事件
    xy_xx_students_scoreTemplateDownload() {
      request({
        url: `/api/xy_xx_students_archives/Xy_xx_students_score/templateDownload`,
        method: "post"
      }).then(res => {
        if (!res.data.url) return;
        window.location.href = this.define.comUrl + res.data.url;
      });
    },
    //上传附件事件
    xy_xx_students_scoreuploadForm() {
      this.xy_xx_students_scoreimportBoxVisible = true;
      this.$nextTick(() => {
        this.$refs.xy_xx_students_scoreimportBox.init(
          this.xy_xx_students_scoreColumnList
        );
      });
    },
    xy_xx_students_scoresaveData() {
      this.xy_xx_students_scoreEntityList.map(item =>
        this.dataForm.xy_xx_students_scoreEntityList.push(item)
      );
      this.$refs.xy_xx_students_scoreimportBox.visible = false;
    },

    getcertificatestypeOptions() {
      getDictionaryDataSelector("7866376d5f694d4d851c7164bd00ebfc").then(
        res => {
          this.certificatestypeOptions = res.data.list;
        }
      );
    },
    getgenderOptions() {
      getDictionaryDataSelector("963255a34ea64a2584c5d1ba269c1fe6").then(
        res => {
          this.genderOptions = res.data.list;
        }
      );
    },
    getcompanytypeOptions() {
      getDictionaryDataSelector("913e8d577af546529ee022e6523fcf37").then(
        res => {
          this.companytypeOptions = res.data.list;
        }
      );
    },
    getpersontypeOptions() {
      getDictionaryDataSelector("b40bd4cd9a1e492da68edfdcde636258").then(
        res => {
          this.persontypeOptions = res.data.list;
        }
      );
    },
    geteducationOptions() {
      getDictionaryDataSelector("6a6d6fb541b742fbae7e8888528baa16").then(
        res => {
          this.educationOptions = res.data.list;
        }
      );
    },
    goBack() {
      this.$emit("refresh");
    },
    init(id, isDetail) {
      this.registrationList = [];
      this.academicList = [];
      this.idcardList = [];
      this.photoList = [];
      this.dataForm.xy_xx_students_scoreEntityList = [];
      this.dataForm.id = id || 0;
      this.visible = true;
      this.isDetail = isDetail || false;
      this.$nextTick(() => {
        this.$refs["elForm"].resetFields();
        if (this.dataForm.id) {
          this.loading = true;
          request({
            url:
              "/api/xy_xx_students_archives/Xy_xx_students_archives/" +
              this.dataForm.id,
            method: "get"
          }).then(res => {
            this.dataForm = res.data;
            this.registrationList = this.dataForm.registration
              ? JSON.parse(this.dataForm.registration)
              : [];
            this.academicList = this.dataForm.academic
              ? JSON.parse(this.dataForm.academic)
              : [];
            this.idcardList = this.dataForm.idcard
              ? JSON.parse(this.dataForm.idcard)
              : [];
            this.photoList = this.dataForm.photo
              ? JSON.parse(this.dataForm.photo)
              : [];
            this.dataForm.xy_xx_students_scoreEntityList = this.dataForm
              .xy_xx_students_scoreEntityList
              ? this.dataForm.xy_xx_students_scoreEntityList
              : [];
            console.log(this.dataForm, 123);
            this.loading = false;
          });
        }
      });
    },
    // 表单提交
    dataFormSubmit() {
      this.$set(
        this.dataForm,
        "registration",
        this.registrationList.length
          ? JSON.stringify(this.registrationList)
          : ""
      );
      this.$set(
        this.dataForm,
        "academic",
        this.academicList.length ? JSON.stringify(this.academicList) : ""
      );
      this.$set(
        this.dataForm,
        "idcard",
        this.idcardList.length ? JSON.stringify(this.idcardList) : ""
      );
      this.$set(
        this.dataForm,
        "photo",
        this.photoList.length ? JSON.stringify(this.photoList) : ""
      );
      this.$refs["elForm"].validate(valid => {
        if (valid) {
          this.dataForm.organizeId = this.$store.getters.organizeId;
          if (!this.dataForm.id) {
            request({
              url: `/api/xy_xx_students_archives/Xy_xx_students_archives`,
              method: "post",
              data: this.dataForm
            }).then(res => {
              this.$message({
                message: res.msg,
                type: "success",
                duration: 1000,
                onClose: () => {
                  (this.visible = false), this.$emit("refresh", true);
                }
              });
            });
          } else {
            request({
              url:
                "/api/xy_xx_students_archives/Xy_xx_students_archives/" +
                this.dataForm.id,
              method: "PUT",
              data: this.dataForm
            }).then(res => {
              this.$message({
                message: res.msg,
                type: "success",
                duration: 1000,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refresh", true);
                }
              });
            });
          }
        }
      });
    },
    addHandlexy_xx_students_scoreEntityList() {
      let item = {
        papername: undefined,

        archivesid: undefined,

        stuid: undefined,

        stuname: undefined,

        stuscore: undefined,

        paperid: undefined,

        starttime: undefined,

        endtime: undefined,

        clazzid: undefined,

        clazzname: undefined,

        creatoruserid: undefined,

        creatortime: undefined
      };
      this.dataForm.xy_xx_students_scoreEntityList.push(item);
    },
    handleDelxy_xx_students_scoreEntityList(index) {
      this.dataForm.xy_xx_students_scoreEntityList.splice(index, 1);
    },
    currentRow(val) {
      this.dataForm.classid = val.id;
      this.dataForm.classname = val.classname;
    }
  }
};
</script>
